<template>
  <div class="breadcrumb">
    <div
      class="breadcrumb__item"
      v-for="item in data"
      :class="{
        'breadcrumb__item--link': item.path ? true : false,
      }"
      @click="handleClick(item)"
    >
      {{ item.label }}
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  data: Array,
})

const router = useRouter()

const handleClick = item => {
  if (item.path) {
    router.push({
      path: item.path,
      query: item.query,
    })
  }
}
</script>
<style lang="scss" scoped>
.breadcrumb {
  height: 19px;
  display: flex;
}

.breadcrumb__item {
  color: rgba(0, 0, 0, 0.45);
  &:after {
    content: '/';
    margin: 0 9px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.45);
  }

  &:last-child {
    color: rgba(0, 0, 0, 0.88);
    font-weight: 700;
    &:after {
      display: none;
    }
  }
}

.breadcrumb__item--link {
  cursor: pointer;
  &:hover {
    color: var(--primary);
    // color: rgba(0, 0, 0, 0.88);
    // font-weight: 700;
  }
}
</style>
